<template>
	<view class="page">
		<topVue title="活动任务"></topVue>
		<view class="flex align-center padding30">
			<image src="../../static/person/task_1.png" style="width: 36rpx; height: 30rpx;"></image>
			<view class="flex-column padding-row20">
				<text style="line-height: 1; color: #1CC289; font-weight: 600; font-size: 40rpx;">150</text>
				<u-gap height="15"></u-gap>
				<text style="line-height: 1; color: #4B5563;">已通过任务获得消费积分</text>
			</view>
		</view>
		<view class="item padding30 margin30 flex align-center">
			<view class="iconVue relative">
				<image src="../../static/person/task_2.png" style="width: 48rpx; height: 48rpx;" class="absolute-auto"></image>
			</view>
			<view class="flex-1 flex-column flex-between" style="padding-left: 20rpx; height: 106rpx;">
				<view class="flex-between">
					<text style="line-height: 1; color: #111827; font-weight: 600;">新用户注册奖励</text>
					<text style="line-height: 1; color: #1CC289; font-size: 32rpx; font-weight: 600;">+100</text>
				</view>
				<view class="flex-between">
					<text style="line-height: 1; color: #4B5563; font-weight: 600;">完成注册即可获得100消费积分</text>
					<text style="line-height: 1; color: #1CC289; font-size: 32rpx; ">已完成</text>
				</view>
			</view>
		</view>
		<view class="item padding30 margin30 flex align-center">
			<view class="iconVue relative" style="background: rgba(96, 165, 250, 0.1);">
				<image src="../../static/person/task_3.png" style="width: 48rpx; height: 48rpx;" class="absolute-auto"></image>
			</view>
			<view class="flex-1 flex-column flex-between" style="padding-left: 20rpx; height: 106rpx;">
				<view class="flex-between">
					<text style="line-height: 1; color: #111827; font-weight: 600;">分享获得奖励</text>
					<text style="line-height: 1; color: #60A5FA; font-size: 32rpx; font-weight: 600;">+50</text>
				</view>
				<view class="flex-between">
					<text style="line-height: 1; color: #4B5563; font-weight: 600;">每成功分享一位用户可获得<br>50消费积分</text>
					<view class="btn" @click="$tools.route('../person/share')">去分享</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				
			}
		},
		
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
	.item {
		width: 690rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		.iconVue {
			width: 106rpx;
			height: 106rpx;
			background: rgba(28, 194, 137, 0.1);
			border-radius: 50%;
		}
		.btn {
			width: 120rpx;
			height: 56rpx;
			text-align: center;
			line-height: 56rpx;
			color: #fff;
			border-radius: 12rpx;
			background: linear-gradient(to right, #1CC289, #60A5FA);
		}
	}
</style>